<template>
  <div class="app-container" ref="appContainer">
    <div class="header">
      <el-form :inline="true" class="search-form" :model="inputSearch" ref="ruleFormRef">
        <el-form-item label="请输入用户ID">
          <el-input v-model="inputSearch.searchId" :placeholder="`请输入用户ID`" clearable />
        </el-form-item>
      </el-form>
      <div class="search">
        <el-button type="primary" @click="onclickSearch" :icon="Search">搜索</el-button>
      </div>
    </div>

    <!-- ------------表格--------------->
    <div class="table">
      <el-table v-loading="loading" :data="list" fit highlight-current-row style="width: 100%" :border="true">
        <el-table-column label="用户ID" align="center" prop="userid" width="125px">
        </el-table-column>
        <el-table-column label="头像" width="90px" align="center">
          <template #default="scope">
            <el-avatar :size="80" :src="scope.row.headimg">
              <img src="@/assets/image/userlogo.png" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="呢称" align="center" prop="nick_name" width="125px">
        </el-table-column>
        <el-table-column label="上级ID" align="center" prop="invite" width="100px">
        </el-table-column>
        <el-table-column label="下级人数" align="center" prop="xiaji" width="100px">
        </el-table-column>
        <el-table-column label="钻石" align="center" prop="gems" width="100px">
        </el-table-column>
        <el-table-column label="金豆" align="center" prop="coins" width="100px">
        </el-table-column>
        <el-table-column label="推广金豆" align="center" prop="income" width="100px">
        </el-table-column>
        <el-table-column label="魅力值" align="center" prop="meilis" width="100px">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="state_str" width="100px">
        </el-table-column>
        <el-table-column label="操作" align="center" width="500px">
          <template #default="scope">
            <el-button type="success" @click="onClickXiaji(scope.row)">查看下级玩家</el-button>
            <el-button type="warning" @click="onClickNormalDaili(scope.row)">{{ get_normaldaili_word(scope.row)
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- ------------分页--------------->
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="listQuery.pagenum" :limit.sync="listQuery.pagesize"
      @pagination="getList" /> -->

    <!-- ------------分页--------------->
    <div class="pagination">
      <el-pagination v-model:currentPage="listQuery.pagenum" :page-size="listQuery.pagesize" background
        layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" @size-change="handleSizeChange"
        @current-change="getList" />
    </div>


    <el-dialog v-model="dialogVisible" title="代理管理" width="80%">
      <el-table :data="dlgData">
        <el-table-column prop="userid" label="用户ID" width="180" />
        <el-table-column label="头像" width="90px" align="center">
          <template #default="scope">
            <el-avatar :size="80" :src="scope.row.headimg">
              <img src="@/assets/image/userlogo.png" />
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="呢称" align="center" prop="nick_name" width="125px">
        </el-table-column>
        <el-table-column label="钻石" align="center" prop="gems" width="100px">
        </el-table-column>
        <el-table-column label="金豆" align="center" prop="coins" width="100px">
        </el-table-column>
        <el-table-column label="魅力值" align="center" prop="meilis" width="100px">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="state_str" width="100px">
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination v-model:currentPage="dlgparams.pagenum" :page-size="dlgparams.pagesize" background
          layout="total, sizes, prev, pager, next, jumper" :total="dlgparams.total" @size-change="handleDialogSizeChange"
          @current-change="get_invite_list" />
      </div>
    </el-dialog>


  </div>
</template>
<script lang="ts" setup name="comprehensive">
import { Search } from '@element-plus/icons-vue'
import { computed, ref, reactive, onMounted, nextTick } from 'vue'
import * as dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { Logger } from '@/engine/util/Logger'
import { HttpClient } from '@/utils/HttpClient'
import { da, fa, ro, tr } from 'element-plus/es/locale'
import { UIHelper } from '@/utils/UIHelper'
import { t } from '@wangeditor/core'
const loading = ref(true)
const appContainer = ref(null)


const inputSearch = reactive({
  searchId: '',
})

//列表查询选项
const listQuery = reactive({
  pagenum: 1, //第几页
  pagesize: 10, //一页多少个
  total: 0
})

let list = reactive([
  {
    "userid": 1,
    "coins": 0,
    "gems": 0,
    "meilis": 0,
  }
])

const dialogVisible = ref(false)
let dialogUserid = 0

const dlgparams = reactive({
  pagenum: 1,
  pagesize: 10,
  total: 0
})
let dlgData = reactive([
  {
    "userid": 1,
    "coins": 0,
    "gems": 0,
    "meilis": 0,
  }
])


onMounted(() => {
  nextTick(() => {
    // let data = appContainer.value.
  })
  setTimeout(() => {
    loading.value = false
  }, 500)
  getList()
})


const onclickSearch = () => {
  Logger.log('onclickSearch!', inputSearch)
  // if(inputSearch.searchId ==)
  let searchId: number = parseInt(inputSearch.searchId)
  if (isNaN(searchId)) {
    // UIHelper.showMsg("请输入正常的用户id")
    getList()
  } else {
    HttpClient.get_user_info(searchId, (data: object) => {
      formatUserList(data["users"], list)
    })
  }
}

const handleSizeChange = (val: number) => {
  listQuery.pagesize = val
  getList()
}

const formatUserList = (users: Array<object>, resultList:Array<object>) => {
  resultList.splice(0)
  for (let i = 0; i < users.length; i++) {
    let user = {
      "userid": users[i]["userid"],
      "headimg": users[i]["headimg"],
      "nick_name": users[i]["nick_name"],
      "img1": users[i]["img1"],
      "invite": users[i]["invite"],
      "lv": users[i]["lv"],
      "qudaodaili": users[i]["qudaodaili"],
      "xiaji": users[i]["xiaji"],
      "gems": users[i]["gems"],
      "coins": users[i]["coins"],
      "income": users[i]["income"] || 0,
      "meilis": users[i]["meilis"] || 0,
      "state": users[i]["state"]
    }
    if (users[i]["state"] == 1) {
      user["state_str"] = "正常"
    }
    else if (users[i]["state"] == 0) {
      user["state_str"] = "封禁"
    }
    else if (users[i]["state"] == 0) {
      user["state_str"] = "测试账号"
    }
    resultList[i] = user
  }
}

const getList = () => {
  loading.value = true;
  HttpClient.get_user_normal_daili_list(listQuery.pagenum, listQuery.pagesize, (data: object) => {
    loading.value = false
    let users: Array<object> = data["users"]
    formatUserList(users, list)
    listQuery.total = data["count"]
  })
}

const get_normaldaili_word = (row) => {
  // Logger.log("get_normaldaili_word=", row.lv)
  if (row.lv > 0) {
    return "取消普通代理(VIP)"
  }
  else {
    return "设为普通代理(VIP)"
  }
}


const onClickNormalDaili = (row) => {
  let userid: number = row.userid
  let lv: number = row.lv
  if (lv == 0) {
    lv = 1;
  }
  else {
    lv = 0
  }
  HttpClient.set_normal_daili(userid, lv, () => {
    row.lv = lv
    getList()
  })
}

const handleDialogSizeChange = (val: number) => {
  dlgparams.pagesize = val
  get_invite_list()
}

const get_invite_list = () => {
  HttpClient.get_invite_list(dlgparams.pagenum, dlgparams.pagesize, dialogUserid, (data) => {
    dialogVisible.value = true
    let users: Array<object> = data["users"]
    formatUserList(users, dlgData)
    dlgparams.total = data["count"]
  })
}

const onClickXiaji = (row) => {
  dialogUserid = row.userid
  get_invite_list()
}




// const getSummaries = (param) => {
//   // const { columns, data } = param;
//   const sums = [];
//   sums[0] = "合计";
//   let sum_chargePeople: number = 0;
//   let sum_chargeMoney: number = 0;
//   // for (let i = 0; i < this.showList.length; i++) {
//   //   let model: ChargeModel = this.showList[i];
//   //   sum_chargePeople += model.chargePeople;
//   //   sum_chargeMoney += model.chargeMoney;
//   // }
//   sums[1] = sum_chargePeople;
//   sums[2] = sum_chargeMoney;
//   return sums;
// }
</script>
  
<style scoped lang="scss">
.header {
  display: flex;
  padding: 16px 16px 0 16px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: white;
  box-shadow: 0 0 12px rgb(0 0 0 / 5%);

  .search-form {
    flex: 1;

    ::v-deep {
      .el-input--default {
        width: 200px;
      }
    }
  }

  .search {
    flex-shrink: 0;
    white-space: nowrap;
  }
}
</style>
  